<template>
  <div class="analysis-container">
    <!-- 左侧菜单 -->
    <div class="sidebar">
      <el-menu
        :default-active="activeMenu"
        class="menu"
        @select="handleSelect"
      >
        <!-- <el-menu-item index="/analysis/profiler1d">
          <span>1D Profiler</span>
        </el-menu-item>
        <el-menu-item index="/analysis/profiler2d">
          <span>2D Profiler</span>
        </el-menu-item> -->
        <el-menu-item index="/analysis/profiler">
          <span>Profiler</span>
        </el-menu-item>
        <el-menu-item index="/analysis/position">
          <span>Position Log</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 右侧内容区 -->
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 计算当前激活的菜单项
const activeMenu = computed(() => route.path)

// 处理菜单选择
const handleSelect = (path) => {
  router.push(path)
}
</script>

<style scoped>
.analysis-container {
  display: flex;
  height: calc(100vh - 64px);
  margin-top: 64px;
}

.sidebar {
  width: 200px;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
}

.menu {
  border-right: none;
}

.content {
  flex: 1;
  overflow: hidden; /* 防止内容溢出 */
}

/* 确保路由视图填满内容区 */
:deep(router-view) {
  height: 100%;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
  font-size: 14px;
}

:deep(.el-menu-item.is-active) {
  background-color: #e6f2ff;
  color: #409EFF;
}
</style> 